<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<div class="container-fluid">
    <div class="container">
        <form class="form-horizontal" role="form" method="post">
            <!-- 标题 -->
            <div class="row text-center">
                <h3>人力资源系统_审计系统</h3>
                <p>驱动ID:1</p>
            </div>

            <!-- 驱动信息面板 -->
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-4 text-right">
                                        <img class="fastsyncer_img" th:src="@{/images/mysql.png}">
                                    </div>
                                    <div class="col-md-8">
                                        <p class="driver_break_word">人力资源系统</p>
                                        <p>数据源表：MyUser</p>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4 text-center">
                                <div class="row-fluid">
                                    <div class="span4"><span class="fa fa-arrow-right fa-3x"></span></div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-4 text-right">
                                        <img class="fastsyncer_img" th:src="@{/images/oracle.png}">
                                    </div>
                                    <div class="col-md-8">
                                        <p class="driver_break_word">审计系统</p>
                                        <p>目标源表：MyLog</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 驱动配置操作 -->
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-10"></div>
                    <div class="col-md-2 text-right">
                        <button id="mappingSubmitBtn" type="button" class="btn btn-primary">
                            <span class="fa fa-save"></span>保存
                        </button>
                        <button id="$driverId" type="button" class="btn btn-default mappingTableGroupBackBtn">
                            <span class="fa fa-reply"></span>返回
                        </button>
                    </div>
                </div>
            </div>

            <!-- 基本配置区域 -->
            <div class="row">
                <div class="panel-group">
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <u data-toggle="collapse" class="fastsyncer_pointer" href="#mappingBaseConfig">基本配置</u>
                            </h4>
                        </div>
                        <div id="mappingBaseConfig" class="panel-body panel-collapse collapse in">
                            <!-- 表字段映射 -->
                            <p class="text-muted">字段关系</p>

                            <div class="row">
                                <!-- 数据源表配置 -->
                                <div class="col-md-5">
                                    <label class="col-sm-3 control-label text-right">数据源字段</label>
                                    <div class="col-sm-9">
                                        <select id="sourceTable" class="form-control select-control">
                                            <option value="ID">ID</option>
                                            <option value="NAME">NAME</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- 中间图标 -->
                                <div class="col-md-2 text-center">
                                    <span class="fa fa-angle-double-right fa-2x"></span>
                                </div>
                                <!-- 目标源字段配置 -->
                                <div class="col-md-5">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label text-right">目标源字段</label>
                                        <div class="col-sm-9">
                                            <select id="targetTable" class="form-control select-control">
                                                <option value="ID">ID</option>
                                                <option value="NAME">NAME</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-11"></div>
                                    <div class="col-md-1">
                                        <button id="fieldAdd" type="button" class="btn btn-primary">
                                            <span class="fa fa-plus"></span>添加
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>数据源字段</th>
                                        <th>目标源字段</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="$driverId" class="tableList">
                                        <tr title='转换配置' class='fastsyncer_pointer'>
                                            <td>ID</td>
                                            <td>ID</td>
                                            <td><a class='fa fa-remove fa-2x tableDelete fastsyncer_pointer' title='删除' ></a></td>
                                        </tr>
                                        <tr title='转换配置' class='fastsyncer_pointer'>
                                            <td>NAME</td>
                                            <td>NAME</td>
                                            <td><a class='fa fa-remove fa-2x tableDelete fastsyncer_pointer' title='删除' ></a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 高级配置区域 -->
            <div class="row">
                <div class="panel-group mappingConfigPanel">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <u data-toggle="collapse" class="fastsyncer_pointer" href="#mappingSuperConfig">高级配置</u>
                            </h4>
                        </div>
                        <div id="mappingSuperConfig" class="panel-body panel-collapse collapse">
                            <!-- 全量配置 -->
                            <div th:id="mappingFullConfig" class="hidden">
                                <div th:replace="mapping/editMappingFull :: content"></div>
                            </div>

                            <!-- 增量配置 -->
                            <div th:id="mappingIncrementConfig" class="hidden">
                                <div th:replace="mapping/editMappingIncrement :: content"></div>
                            </div>

                            <!-- 过滤条件 -->
                            <div th:replace="mapping/editMappingFilter :: content"></div>

                            <!-- 插件配置 -->
                            <div th:replace="mapping/editMappingPlugin :: content"></div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- 转换配置(对话框) -->
            <div class="hidden">
                <div th:id="editMappingTableGroupConvert">
                    <div th:replace="mapping/editMappingTableGroupConvert :: content"></div>
                </div>
            </div>

        </form>
    </div>
</div>

<script type="text/javascript">
    //加载JS
    $.getScript('/js/mapping/editMappingTableGroup.js');
</script>
</html>